<script setup>
import ChatNew from "@/views/chat-new.vue";
import ChatHistory from "@/views/chat-history.vue";
import {systemInfo, userInfo} from "@/stores/userStore.js";
import {searchHistorySummary} from '@/api/http/chat.js'
import {onBeforeMount, ref} from 'vue'

const historyData = ref([]);
const darkMode = ref(true);
const showModeEnum = {
  "new": 1,
  "history": 2
}
const refreshHistory = ref(true);
const historyDetailLoading = ref(false);


const searchHistoryFunc = async () => {
  refreshHistory.value = false;
  await searchHistorySummary({
    "operateId": userInfo().userId
  }).then(res => {
    historyData.value = res.data.data;
    refreshHistory.value = true;
  })
}

const ChatHistoryComponent = ref();
const ChatNewComponent = ref();

const chooseDetail = async (param) => {
  //先搜索历史
  await searchHistoryFunc();
  //切换到历史页面
  systemInfo().displayMode = 2;

  await ChatHistoryComponent.value.initFunc();
  await ChatHistoryComponent.value.handleMessage({
    "message": param.message,
    "userId": userInfo().userId
  });
}

const openNewChat = async (mode, param) => {
  if (mode === showModeEnum.new) {
    ChatNewComponent.value.chatFormData = {
      ...ChatNewComponent.value.chatFormData, "userMessage": ''
    };
  } else if (mode === showModeEnum.history) {
    systemInfo().requestId = param.requestId
    historyDetailLoading.value = true;
    ChatHistoryComponent.value.formVal = {};
    await ChatHistoryComponent.value.searchHistoryDetail();


    historyDetailLoading.value = false;
  }
  systemInfo().displayMode = mode;


}


//初始化的时候查询历史
onBeforeMount(
    async () => {
      await searchHistoryFunc();
      if (systemInfo().displayMode === showModeEnum.history) {
        await ChatHistoryComponent.value.searchHistoryDetail();
      }
    }
);

</script>

<template>
  <el-container id="chat-container">
    <el-aside class="chat-aside">
      <div class="chat-aside-top chat-aside-item">
        <el-button type="primary" plain @click="openNewChat(showModeEnum.new)">
          <el-icon style="margin-right: 10px">
            <ChatLineRound/>
          </el-icon>
          {{ $t('newChat') }}
        </el-button>
      </div>
      <div class="chat-aside-body chat-aside-item">
        <template v-if="refreshHistory">
          <div v-for="historyItem in historyData">
            <el-text>{{ historyItem.groupInfo.date }}</el-text>
            <ul class="chat-history-line-ul" v-for="historyLineItem in historyItem.datas">
              <li class="chat-history-line">
                <el-badge :value="historyLineItem.modelType??''"
                          :offset="[-80, 0]"
                          type="info"
                >
                  <el-button
                      style="display: inline"
                      @click="openNewChat(showModeEnum.history,{'requestId':historyLineItem.chatId})"
                  >
                    <el-text
                        style="width:200px;text-align: left"
                        type="info" truncated>&emsp;{{ historyLineItem.title }}
                    </el-text>
                  </el-button>
                </el-badge>
              </li>
            </ul>
          </div>
        </template>
      </div>

    </el-aside>
    <el-main v-loading="historyDetailLoading">
      <chat-new
          ref="ChatNewComponent"
          @chooseDetail="chooseDetail"
          v-show="systemInfo().displayMode===1"/>
      <chat-history
          ref="ChatHistoryComponent"
          v-show="systemInfo().displayMode===2"/>
    </el-main>
  </el-container>
</template>

<style scoped lang="scss">
#chat-container {
  height: 100%;
  width: 100%;

  .el-main {
    padding: 0 0 0 0
  }

  .chat-aside {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--el-menu-border-color);

    .chat-aside-item {
      width: 100%;
      padding-left: 28px;
    }

    .chat-aside-top {
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      //order: 1;
    }

    .chat-aside-body {
      //order: 2;
      overflow: scroll;
      flex-grow: 1;


      .chat-history-line-ul {
        padding: 5px 5px 0 0;
        list-style-type: none;


        .chat-history-line {
          justify-content: center;
          height: 30px;
          padding: 0;
          text-align: left;

          //display: flex;
          //align-items: center;
          span {
            width: 100%;
          }
        }
      }

    }

    .chat-aside-bottom {
    }

    .chat-aside-bottom {
      order: 3
    }
  }
}
</style>